<template>
  <div class="eval">
    <div class="plot" style="margin-top: 20px">
      <h2>精彩评论</h2>
      <a @click="openEva" class="comment-entry"> 写短评 </a>
    </div>
    <div class="mod-content">
      <div class="comment-list-container">
        <ul id="comment-list">
          <li
            v-for="(comment, index) in commentList"
            class="comment-container"
            :key="comment.id"
          >
          <ReportVue v-if="report" :reportId="reportId"/>
            <div class="portrait-container">
              <div class="portrait">
                <img :src="comment.user.img" />
              </div>
            </div>
            <div class="main">
              <div class="main-header">
                <div class="user">
                  <span class="name">{{ comment.user.nickname }}</span>
                  <span v-show="comment.user.bought" class="tag">购</span>
                </div>
                <div class="time">
                  <span>{{ comment.createTime | fmtTime("MM-DD") }}</span>
                  <el-rate
                    v-model="comment.score"
                    disabled
                    text-color="#ff9900"
                    style="margin-top: 5px;"
                  ></el-rate>
                </div>
                <div class="operation-comment">
                  <span
                  id="report"
                    class="report"
                    @click="Report(comment.id)"
                    >举报</span
                  >
                  <div class="approve" :class="[{ active: comment.beLike }]">
                    <i
                      @click="Approve(comment.id, index)"
                      class="approve-icon"
                    ></i>
                    <span class="num">{{ comment.liked }}</span>
                  </div>
                </div>
              </div>
              <div class="comment-content">
                {{ comment.eva }}
              </div>
            </div>
          </li>
          <li class="noComment" v-if="commentList.length === 0">暂无评论，请留下您宝贵的意见</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { ApproveComment } from '@/api/comment'
import ReportVue from './Report.vue'
import dayjs from 'dayjs'
export default {
  name: 'TtmsComment',
  props: ['mId'],
  data () {
    return {
      reportId: -1,
      report: false
    }
  },
  components: { ReportVue },
  methods: {
    async Approve (id, index) {
      const result = await ApproveComment(id)
      this.$store.dispatch('comment/Approve', {
        beLike: result.data.beLike,
        index: index
      })
    },
    openEva () {
      this.$bus.$emit('update:dialogFormVisible', true)
    },
    Report (id) {
      // console.log(id)
      this.report = !this.report
      this.reportId = id
    }
  },
  filters: {
    fmtTime (value, format = 'YYYY-MM-FF HH:mm:ss') {
      return dayjs(value).format(format)
    }
  },
  mounted () {
    this.$store.dispatch('comment/getComments', this.mId)
    this.$bus.$on('update:report', data => {
      this.report = data
    })
  },
  computed: {
    ...mapState('comment', ['commentList'])
  }
}
</script>

<style lang="scss" scoped>
.eval {
  width: 730px;
  float: left;
}
.plot h2 {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: 18px;
  color: #333;
  line-height: 18px;
}
.plot h2:before {
  float: left;
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  margin-right: 6px;
  background-color: #ef4238;
}
.mod-content {
  margin-top: 20px;
  color: #333;
}
.comment-container {
  margin-top: 20px;
}
.comment-container .portrait-container {
  margin-right: 20px;
  float: left;
  position: relative;
  width: 50px;
  height: 50px;
}
.comment-container .portrait {
  border-radius: 50%;
  overflow: hidden;
  width: 50px;
  height: 50px;
}
.comment-container .portrait img {
  width: 50px;
}
.comment-container .main {
  margin-left: 70px;
}
.comment-container .main-header {
  position: relative;
  font-size: 16px;
}
.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}
.comment-container .main-header .user {
  margin-top: 2px;
}
.comment-container .main-header .name {
  vertical-align: middle;
  color: #333;
}
.comment-container .main-header .tag {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #7cc6f9;
  border-radius: 2px;
  color: #7cc6f9;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
}
.comment-container .main-header .time {
  margin-top: 4px;
  color: #999;
}
.el-rate {
  height: 20px;
  line-height: 1;
}
.comment-container .operation-comment {
  position: absolute;
  top: 20px;
  right: 0;
}
.comment-container .operation-comment .report {
  display: none;
  font-weight: 400;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-right: 26px;
  cursor: pointer;
}
.comment-container .operation-comment .approve {
  display: inline-block;
}
.comment-container .operation-comment .approve.active .approve-icon {
  background: url("@/static/images/like.png");
}
.like-icon,
i.approve-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin-top: 1px;
  margin-right: 1px;
  vertical-align: middle;
  background: url("@/static/images/nolike.png");
}
.comment-container .operation-comment .approve .num {
  font-size: 14px;
  color: #999;
}
.clearfix:after {
  clear: both;
  content: " ";
  display: table;
}
.comment-container .comment-content {
  margin-top: 20px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e5e5e5;
  color: #666;
  line-height: 26px;
  font-size: 14px;
}
.comment-entry {
  cursor: pointer;
  // position: absolute;
  float: right;
  top: -10px;
  right: 0;
  display: block;
  height: 30px;
  padding: 0 10px;
  border-radius: 15px;
  border: 1px solid #ef4238;
  text-align: center;
  font-size: 14px;
  line-height: 30px;
  color: #ef4238;
}
li:hover #report{
  display: inline-block;
}
.noComment {
  margin-top: 20px;
  padding: 20px 0;
  text-align: center;
  color: #999;
  font-size: 14px;
  list-style: none;
}
</style>
